<template>
  <!-- 图片列表组件 -->
  <div id="img-box">
    <div  id="img-item" v-for="(item, index) in imglist" :key="index">
      <van-image
        @click="preview(item.img)"
        lazy-load 
        width="100%"
        fit="contain"
        :src="require('@/assets/Album_imgList/' + item.img)"
      />
    </div>
  </div>
</template>

<script>
import { ImagePreview } from "vant";
export default {
  name: "ImgItem",
  data() {
    return {
      imglist: [],
    };
  },
  created() {
    // 获取本地数据（图片地址）
    this.axios.get("/data/imglist.json").then((res) => {
      this.imglist = res.data.imglist;
    });
  },
  methods: {
    // 点击图片，显示对应预览效果
    preview(img) {
      ImagePreview({
        images: [require("@/assets/Album_imgList/" + img)],
      });
    },
  },
};
</script>

<style lang="less" scoped>
/* 图片 三列分布 */
#img-box {
  box-shadow: -3px -1px 7px rgb(54, 53, 53);
  margin: 5px;
  column-count: 3;
  column-gap: 5px;
}
</style>